<template>
  <transition name="slide">
    <div class="address-list">
      <!--
      <div class="search-wrapper">
      <router-link to="/addresslist/search">
        <div class="search-box">
            <i class="fa fa-search"></i>
            <span>搜索</span>
        </div>
      </router-link>
      </div>
      -->
      <div id="wrapper" ref="scrollWrap">
        <div class="scroller" ref="scroller">
          <ul ref="scrollList">
            <router-link tag="li" v-for="(employee, index) in employees" :key="employee.id" :to="{name: 'addressDetail', params:{'index':index}}">
              <address-list-item :employee="employee" ></address-list-item>
            </router-link>
          </ul>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  import BScroll from 'better-scroll'
  import { Indicator } from 'mint-ui';
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import AddressListItem from './AddressListItem.vue'
  import fetch from '../../utils/fetch'
  /*获取当前缩放比*/
  const DEVICE_RATIO=getDeviceRatio();


  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   * @param stop 下拉刷新后回滚
   */

  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop: 0*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  export default {
    name: 'address',
    data () {
      return {
        employees: []
      }
    },
    components:{
      AddressListItem
    },
    methods: {
      filterDirectors(arr){
        var name="";
        arr.forEach((item,i)=>{
          if(i==arr.length-1){
            name+=item.name
          }else{
            name+=item.name+" / "
          }
        })
        return name
      },
      enable(){
        this.scroller&&this.scroller.enable()
      },
      disable(type){
        this.scroller&&this.scroller.disable()
      },
      finishPullDown(){
        this.scroller&&this.scroller.finishPullDown()
      },
      finishPullUp(){
        this.scroller&&this.scroller.finishPullUp()
      },
      refresh(){
        this.scroller&&this.scroller.refresh()
      },
      beforeFetch(type){
        if(type=="Down"){
          alert(type)
        }else if(type=="Up"){
          alert(type)
        }
      },
      afterFetch(type){
        this.enable();

        setTimeout(()=>{

        },300)
      },
      getData () {
        Indicator.open()
        fetch('/api/contacts/list').then(response => {
          if (response.data.success) {
            this.employees = response.data.obj
            this.$store.dispatch('initEmployees', response.data.obj)
          }
        })
        setTimeout(()=>{
          Indicator.close()
        }, 300)
      },
      pullDown () {
        alert('22')
      },
      pullUp () {
        alert('22233')
      }
    },
    mounted(){
      const {scroller,scrollWrap,scrollList}=this.$refs;
      this.scroller = new BScroll(scrollWrap,{
        click:true,
        probeType:3,
        pullDownRefresh:DOWN_CONFIG,
        pullUpLoad:UP_CONFIG
      });
      /*进入页面先获取数据*/
      this.getData();
      /*下拉刷新*/
      //this.scroller.on('pullingDown',()=> this.pullDown());
      /*上拉加载更多*/
      //this.scroller.on('pullingUp',()=> this.pullUp());
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .address-list{
    background: #F0EFF5;
    height: inherit;
  }
  #wrapper{
    position: fixed;
    top: 0px;
    bottom: 40px;
    width: 100%;
    overflow: hidden;
    background:#F0EFF5;
    .scroller{
      position: absolute;
      width: 100%;
      &.topPadding{
        top:1rem;
      }
      z-index: 0;
    }
  }
  .slide-enter-active{
    transition:all 0.4s;
  }
  .slide-enter, .slide-leave-active{
    transform:translate3d(100%, 0, 0);
    transition:all 0.4s;
  }
  .search-wrapper {
    height: 60px;
    background: #F0EFF5;
    padding: 10px 15px 0 15px;
    .search-box {
      background: #fff;
      height: 40px;
      border-radius: 3px;
      @include flex-center;
      color: #C0C4CC;
      i {
        @include fz(4px)
      }
    }
  }

</style>
